<!--
  ~ Copyright (c) 2020 the original author or authors
  ~
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~      https://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
  ~ or implied. See the License for the specific language governing
  ~ permissions and limitations under the License.
  -->
<div class="result">
  <div class="drag-n-drop">
    <app-drag-n-drop
      *ngIf="!resizePhoto"
      [title]="'dnd.title' | translate: { typeImage: 'dnd.image' | translate }"
      [label]="'dnd.label' | translate"
      [maxImageSize]="maxImageSize"
      (upload)="selectFile.emit($event[0])"
    >
    </app-drag-n-drop>
  </div>

  <mat-card class="process-img" *ngIf="resizePhoto">
    <app-change-photo
      #changePhoto
      [disabledButtons]="pending"
      [disabledLandmarksButton]="!recalculatePrintData"
      (resetPhoto)="onResetFile()"
      (changePhoto)="onResetFile($event)"
      (addLandmark)="changePhoto.showLandmarks = !changePhoto.showLandmarks"
    ></app-change-photo>

    <app-face-picture
      [picture]="resizePhoto"
      [printData]="recalculatePrintData"
      [type]="type"
      [isLoaded]="!pending"
      [showLandmarks]="changePhoto.showLandmarks"
    >
    </app-face-picture>
  </mat-card>

  <ng-container *ngIf="isLoaded">
    <div class="request">
      <mat-expansion-panel>
        <mat-expansion-panel-header>
          <mat-panel-title>
            {{ 'test_model.request' | translate }}
          </mat-panel-title>
        </mat-expansion-panel-header>
        <div class="content">
          <pre>{{ requestInfo.request }}</pre>
        </div>
      </mat-expansion-panel>
    </div>

    <div class="response">
      <mat-expansion-panel>
        <mat-expansion-panel-header>
          <mat-panel-title>
            {{ 'test_model.response' | translate }}
          </mat-panel-title>
        </mat-expansion-panel-header>
        <div class="content">
          <pre>{{ formattedResult }}</pre>
        </div>
      </mat-expansion-panel>
    </div>
  </ng-container>
</div>
